<template>
	<!-- 司机监督一览：列表 -->
	<div class="driver-list-container">
		<nav-bar :title="title" :custom-back="true" />
		<div class="car-list">
			<div v-if="list.length!=0">
				<!-- 出车/预约出车 -->
				<div v-for="item in list" v-if="id==1" :key="item.driverId">
					<div class="car-item cc-car-item">
						<div class="flex alignStart">
							<img src="../../assets/logo.png" mode="" class="car-main-pic" />
							<div class="chose-r f24">
								<div class="f30 fontB">{{item.driverName}}</div>
								<div>起点:{{item.startingPoint}}</div>
								<div>终点:{{item.dropOffPoint}}</div>
								<div>用车人：{{item.applyUserDept}} {{item.applyUserName}}</div>
								<div>出车时间：{{item.startTime}} 至 {{item.endTime}}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 请假 -->
				<div v-for="item in list" v-if="id==2" :key="item.driverId">
					<div class="car-item">
						<div class="flex align">
							<img src="../../assets/logo.png" mode="" class="car-main-pic" />
							<div class="chose-r">
								<div class="f28 fontB">{{item.driverName}}</div>
								<div>请假事由：{{item.leaveReason}}</div>
								<div>请假时间：{{item.startTime}} - {{item.endTime}}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 值班 -->
				<div v-for="item in list" v-if="id==3" :key="item.driverId">
					<div class="car-item zb-car-item">
						<div class="flex align">
							<img src="../../assets/logo.png" mode="" class="car-main-pic" />
							<div class="chose-r">
								<div class="f24 fontB">{{item.dutyType}}：{{item.driverName}}</div>
								<div class="f24">联系电话：{{item.phone}}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 维保 -->
				<div v-for="item in list" v-if="id==4" :key="item.driverId">
					<div class="car-item">
						<div class="flex align">
							<img src="../../assets/logo.png" mode="" class="car-main-pic" />
							<div class="chose-r">
								<div class="f28 fontB">{{item.driverName}}</div>
								<div class="f24">维保时间：{{item.startTime}} - {{item.endTime}}</div>
								<div class="f24">维保车辆：{{item.licenseNumber}}（{{item.licenseColor}}）</div>
								<image :src="item.vehicleImg" v-if="item.vehicleImg" mode="" class="wb-pic" />
							</div>
						</div>
					</div>
				</div>
				<!-- 空闲 -->
				<div v-for="item in list" v-if="id==5" :key="item.driverId">
					<div class="car-item kx-car-item">
						<div class="flex align mB20">
							<img src="../../assets/logo.png" mode="" class="car-main-pic"></image>
							<div class="chose-r f24">
								<div class="f28 fontB ">{{item.driverName}} </div>
								<div>
									<span class="f24">评分：{{item.driverScore}}</span>
									<van-rate readonly allow-half void-icon="star" void-color="#eee"
										:value="item.driverScore" :if="item.driverScore" size="16px" />
								</div>
								<div>
									<span>关联车辆：{{item.licenseNumber}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 待审批 -->
				<div v-for="item in list" v-if="id==6" :key="item.driverId">
					<div class="car-item kx-car-item">
						<div class="flex align mB20">
							<img src="../../assets/logo.png" mode="" class="car-main-pic"></image>
							<div class="chose-r f24">
								<div class="f28 fontB ">{{item.driverName}} </div>
								<div>起点:{{item.startingPoint}} </div>
								<div>终点:{{item.dropOffPoint}}</div>
								<div>用车人：{{item.applyUserDept}} {{item.applyUserName}}</div>
								<div>出车时间：{{item.startTime}} 至 {{item.endTime}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div v-if="isLoading" class="bottom-tip">加载中...</div>
			<div class="bottom-tip" v-if="total==0">暂无数据</div>
			<div class="bottom-tip" v-if="total>8&&list.length==total">到底了~</div>
		</div>

		<!-- 点击去顶部 -->
		<div class="goTop" v-if="showTopButton" @click="scrollToTop">
			<!-- <img src="path/to/your/icon.png" alt="Go to top" /> -->
		</div>

		<!-- <image src='../../../images/fastTop.png' class='goTop' :hidden='showTop' bindtap='goTop'></image> -->

	</div>
</template>

<script>
	import utils from "@/utils/utils.js"
	import NavBar from '@/components/NavBar'
	export default {
		name: "DriverSupervisionList",
		components: {
			NavBar
		},
		data() {
			return {
				testData: [{
						driverId: '1',
						applyUserDept: '技术部',
						applyUserName: '张三',
						licenseNumber: '京A12345',
						driverName: '李四',
						startTime: '2024-03-20 09:00',
						endTime: '2024-03-20 18:00',
						startingPoint: '北京市朝阳区',
						dropOffPoint: '北京市海淀区',
						driverPhoto: "1.jpg",
						driverScore: 4,
						leaveReason: "保密",
						phone: 15100001234,
						dutyType: "xx",
						licenseColor:"licenseColor"
					},
					{
						driverId: '2',
						applyUserDept: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						driverPhoto: "2.jpg",
						driverScore: 3,
						leaveReason: "生病",
						phone: 15100004321,
						dutyType: "xx",
						licenseColor:"licenseColor"
					},
					{
						driverId: '3',
						applyUserDept: '技术部',
						applyUserName: '张三',
						licenseNumber: '京A12345',
						driverName: '李四',
						startTime: '2024-03-20 09:00',
						endTime: '2024-03-20 18:00',
						startingPoint: '北京市朝阳区',
						dropOffPoint: '北京市海淀区',
						driverPhoto: "1.jpg",
						driverScore: 4,
						leaveReason: "保密",
						phone: 15100001234,
						dutyType: "xx",
						licenseColor:"licenseColor"
					},
					{
						driverId: '4',
						applyUserDept: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						driverPhoto: "2.jpg",
						driverScore: 3,
						leaveReason: "生病",
						phone: 15100004321,
						dutyType: "xx",
						licenseColor:"licenseColor"
					},
					{
						driverId: '5',
						applyUserDept: '技术部',
						applyUserName: '张三',
						licenseNumber: '京A12345',
						driverName: '李四',
						startTime: '2024-03-20 09:00',
						endTime: '2024-03-20 18:00',
						startingPoint: '北京市朝阳区',
						dropOffPoint: '北京市海淀区',
						driverPhoto: "1.jpg",
						driverScore: 4,
						leaveReason: "保密",
						phone: 15100001234,
						dutyType: "xx",
						licenseColor:"licenseColor"
					},
					{
						driverId: '6',
						applyUserDept: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						driverPhoto: "2.jpg",
						driverScore: 3,
						leaveReason: "生病",
						phone: 15100004321,
						dutyType: "xx",
						licenseColor:"licenseColor"
					}
				],
				showTopButton: false,
				list: [],
				isLoading: true,
				total: null,
				hasNextPage: true,
				showTop: true,
				id: "",
				url: "",
				day: "",
				title: ""
			}
		},
		computed: {

		},
		methods: {
			//获取数据列表
			getAllList() {

			},
			// 点击按钮去顶部
			scrollToTop() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			},
			// 滚动后 显示按钮
			handleScroll() {
				this.showTopButton = window.scrollY > 20; // 当滚动超过100px时显示按钮
			}
		},
		created() {
			this.list = this.testData
			this.isLoading = false
		},
		mounted() {
			//获取上一个页面传递的数据
			this.id = this.$route.query.id;
			this.title = this.$route.query.curDateStr + "司机监督一览";
			
			// 监听滚动事件
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件
			window.removeEventListener('scroll', this.handleScroll);
		}
	}
</script>




<style lang="scss" scoped>
	.driver-list-container {
		background: #f5f5f5;
		min-height: 100%;
	}

	.case-body {
		padding: 10px;
	}

	.car-list {
		padding: 20px;
		margin-top: 30px;
	}

	.wb-pic {
		width: 160px;
		height: 100px;
		margin-left: 55%;
		margin-top: 20px;
	}

	// 去顶部按钮
	.goTop {
		position: fixed;
		bottom: 4%;
		right: 5%;
		width: 46px;
		height: 46px;
		z-index: 100;
		background-color: #3f84f1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}


	.add-icon {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		position: fixed;
		right: 5%;
		bottom: 12%;
		text-align: center;
		display: flex;
		color: #fff;
		align-items: center;
		justify-content: center;
	}

	.add-icon image {
		width: 32px;
		height: 32px;
	}


	.status {
		width: 90px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 4px;
		display: inline-block;
		margin-left: 27px;
	}


	.car-item {
		padding: 20px 24px;
		background: #fff;
		border: 1px solid #CCCCCC;
		position: relative;
		margin-bottom: 14px;

	}

	.flex .car-main-pic,
	.flex .chose-r {
		display: inline-block;
		vertical-align: middle;
	}

	.chose-r {
		width: calc(100% - 100px);
		font-size: 14px;
		line-height: 28px;
		text-align: left;
		display: inline;
	}

	.car-main-pic {
		width: 100px;
		height: 100px;
		border-radius: 100%;
		margin-right: 0px;

	}

	.fontB {
		font-weight: bold;
	}



	.c5277E0 {
		color: #5277E0;
	}

	.cFF8832 {
		color: #FF8832;
	}

	.c30CA54 {
		color: #30CA54;
	}

	.cD2D9E1 {
		color: #D2D9E1;
	}

	.van-search__content {
		background: #fff !important;
	}

	/* 出车 */
	/* 值班 */

	/* 空闲 */
	/* .kx-car-item .car-main-pic {
		width: 140px;
		height: 140px;
		border-radius: 50%;
	}

	.kx-car-item .chose-r {
		width: calc(100% - 190px);
	}

	.kx-driver-pic {
		width: 60px;
		height: 60px;
		margin-right: 20px;
		border-radius: 50%;
		vertical-align: middle;
	} */
</style>